<template>
    <a-row :gutter="[4, 4]">
        <a-col :span="24">
            <a-row align="middle" :gutter="[8, 8]">
                <a-col :offset="2"></a-col>
                <a-col :span="10" style="text-align: center"> 标题 </a-col>
                <a-col :span="10" style="text-align: center"> 按钮类型 </a-col>
            </a-row>
        </a-col>
        <a-col :span="24">
            <a-list
                item-layout="vertical"
                size="small"
                :pagination="pagination"
                :data-source="data"
            >
                <template #renderItem="{ item }">
                    <a-row
                        align="middle"
                        :gutter="[8, 8]"
                        style="margin: 5px 0px"
                    >
                        <a-col :span="2" style="text-align: center">
                            <edit-outlined
                                class="ml-icon"
                                @click="editMore(item)"
                            />
                        </a-col>
                        <a-col :span="10">
                            <a-input v-model:value="item['title']"></a-input>
                        </a-col>
                        <a-col :span="10">
                            <a-select v-model:value="item['type']">
                                <a-select-option value="normal">
                                    普通操作
                                </a-select-option>
                                <a-select-option value="danger">
                                    危险操作
                                </a-select-option>
                            </a-select>
                        </a-col>
                        <a-col :span="2" style="text-align: center">
                            <a class="ml-a-danger">
                                <delete-outlined
                                    @click="value.splice(index, 1)"
                                />
                            </a>
                        </a-col>
                    </a-row>
                </template>
            </a-list>
        </a-col>
        <a-col :offset="2" :span="20" style="text-align: center">
            <a-button block @click="add">
                <plus-circle-outlined />
            </a-button>
        </a-col>
    </a-row>

    <a-drawer
        v-model:visible="visibleEdit"
        class="custom-class"
        title="配置"
        :mask="false"
        :width="400"
        style="position: absolute; right: 350px"
    >
        <a-form>
            <a-form-item label="标题">
                <a-input v-model:value="current['title']"></a-input>
            </a-form-item>
            <a-form-item label="类型">
                <a-select v-model:value="current['type']">
                    <a-select-option value="normal"> 普通操作 </a-select-option>
                    <a-select-option value="danger"> 危险操作 </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="事件">
                <a-row>
                    <a-col flex="1">
                        <a>{{ current.event["onClick"] }}</a>
                    </a-col>
                    <a-col :span="6" v-if="current.event">
                        <a-space>
                            <a>更改</a>
                            <a class="ml-a-danger">删除</a>
                        </a-space>
                    </a-col>
                </a-row>
            </a-form-item>
        </a-form>
    </a-drawer>
</template>

<script lang="ts">
import { ref, defineComponent, computed, PropType } from "vue";
import {
    EditOutlined,
    DeleteOutlined,
    PlusCircleOutlined,
} from "@ant-design/icons-vue";
import { TableColumnType } from "ant-design-vue";

interface DataItem {
    title: string;
    type: string;
}

export default defineComponent({
    components: {
        EditOutlined,
        DeleteOutlined,
        PlusCircleOutlined,
    },
    props: {
        value: {
            type: Object as PropType<TableColumnType[]>,
            default: () => [],
        },
    },
    setup(props, { emit }) {
        const pagination = {
            onChange: (page: number) => {},
            pageSize: 10,
            hideOnSinglePage: true,
        };

        const visibleEdit = ref(false);
        const editMore = (row: DataItem) => {
            visibleEdit.value = true;
            current.value = row;
        };

        const data = computed({
            get: () =>
                props.value.filter((item: TableColumnType) => {
                    return item.key != "action";
                }),
            set: (val) => emit("value", val),
        });

        const current = ref({});

        const add = () => {
            console.log();
        };

        return {
            data,
            current,

            visibleEdit,
            pagination,
            editMore,
            add,
        };
    },
});
</script>

<style lang="less" scoped>
.editable-row-operations a {
    margin-right: 8px;
}
</style>